<div class="container" ng-init="resumeId = '<{$resume_id}>'; getAttach()" ng-controller="extEditController">
    <div class="row">
        <div class="col-xs-12 col-panel-profile">
            <h5>简历加项</h5>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <h5 class="text-title">照片</h5>
            <ul class="ul-float ul-ext">
                <li ng-repeat="image in images">
                    <a href="javascript:;" class="link-img" tabindex="0"  data-placement="top" data-toggle="popover"
                       title="" data-content="<a href='#' onclick='scaleAttach({{ $index }})'>放大</a>
                       <br/><a href='#' onclick='javascript: angular.element(this).scope().delAttach({{ $index }})'>删除</a>">
                        <img ng-src="__UPLOAD__/{{ image.url }}" img-name="{{ image.name }}" width="65px" height="65px"/>
                    </a>
                </li>
                <li ng-hide="images.length >= 8" id="liAddImg">
                    <div class="container-upload">
                        <form name="imgUploadForm" class="form-upload" action="<{:U('Upload/photo')}>"
                              target="iframebox" enctype="multipart/form-data" method="post" >
                            <input type="file" name="avatar" class="input-imgfile"
                                   onchange="uploadImgCheck();">
                            <input type="hidden" name="image_name" ng-model="spareId" value="{{ spareId }}">
                        </form>
                        <img src="__MOBILE__/img/btn_create.png" width="65px"/>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-xs-12">
            <h5 class="text-title">视频</h5>
            <ul class="ul-float ul-ext">
                <li ng-show="attach.video_url1">
                    <a href="javascript:;" class="link-img" tabindex="0" data-placement="top" data-toggle="popover"
                       title="操作" data-content="<a href='#' onclick='javascript: angular.element(this).scope().delVideo()'>删除</a>">
                        <video ng-src="__UPLOAD__/{{ video_url1 }}" width="60px" height="60px"></video>
                    </a>
                </li>
                <li ng-hide="attach.video_url1" id="liAddVideo">
                    <div class="container-upload">
                        <form name="videoUploadForm" class="form-upload" action="<{:U('Upload/media')}>"
                              target="iframebox" enctype="multipart/form-data" method="post" >
                            <input type="file" name="avatar" class="input-imgfile"
                                   onchange="uploadVideoCheck();">
                        </form>
                        <img src="__MOBILE__/img/btn_create.png" width="65px"/>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-xs-12">
            <p class="text-tips">注：目前支持上传8张照片及1个20秒以内的手机录制视频。</p>
        </div>
    </div>

    <iframe name="iframebox" src="" style="display:none" ></iframe>
    <input type="hidden" id="resumeId" value="<{$resume_id}>"/>

    <!-- Modal Image Scaler -->
    <div class="modal fade" id="scaleModal" tabindex="-1" role="dialog" aria-labelledby="scaleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                </div>
                <div class="modal-body center">
                    <a href="javascript:;" data-dismiss="modal">
                        <img src="__UPLOAD__/{{ scaleTarget }}" width="100%">
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
        function uploadImgCheck() {
            var exp = /.jpg$|.jpeg$|.gif$|.png$|.bmp$/;
            var file = document.imgUploadForm.avatar.files[0];
            if (file.size > 5 * 1024 * 1024) {
                alert("上传图片不能超过5M");
                return;
            }
            if (!exp.exec(file.type)) {
                alert("图片格式不正确");
                return;
            }
            document.imgUploadForm.submit();
        }

        function uploadVideoCheck() {
            var exp = /.mpg$|.mpeg$|.mov$|.mp4$|.avi$|.3gp$/;
            var file = document.videoUploadForm.avatar.files[0];
            if (file.size > 10 * 1024 * 1024) {
                alert("上传视频不能超过10M");
                return;
            }
            if (!exp.exec(file.type)) {
                alert("视频格式不正确");
                return;
            }
            document.videoUploadForm.submit();
        }

        function scaleAttach(imageIndex) {
            var appElement = document.querySelector('[ng-controller=extEditController]');
            $('#scaleModal').modal('show');
            angular.element(appElement).scope().
                    scaleAttach(imageIndex);
        }

        // Update from server script
        function updateImg(res) {
            var appElement = document.querySelector('[ng-controller=extEditController]');
            if (res.msg != null) {
                angular.element(appElement).scope().
                        getAttach();
            } else if (res.err != null) {
                alert(res.err);
            }
        }

        $(function() {
            $('body').popover({
                selector : '.link-img',
                html : 'true',
                template : '<div class="popover popover-img" role="tooltip"><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
                direction: 'top',
                trigger : 'focus'
            });
        });
    </script>
</div>